<template>
  <div class="small-card" @click="goto">
    <div class="img-box">
      <img :src="cardItem.image" alt="" />
      <div class="time">
        <div class="time-box">
          <p class="date">{{ date }}</p>
          <p>{{ cardItem.type }}</p>
        </div>
      </div>
    </div>
    <div class="bottem-text">
      <p class="tit">{{ cardItem.title }}</p>
      <p v-for="item in cardItem.points" :key="item.id">{{ item }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "SmallCard",
  props: {
    cardItem: {
      type: Object,
    },
  },
  data() {
    return {
      id: "",
      date: "",
    };
  },
  methods: {
    goto() {
      this.$router.push({ path: `/card-read/${this.id}`});
    },
    getTime(time) {
      // 当前时间
      let curTime = new Date();
      // 评论创建的时间
      let createtime = new Date(time);
      // 获取创建时间的月、日、小时、分钟
      let createmon = createtime.getMonth() + 1;
      let createdate = createtime.getDate();

      if (curTime.getMonth() + 1 == createmon) {
        if (curTime.getDate() == createdate) {
          this.date = "今天";
        } else if (curTime.getDate() - createdate == 1) {
          this.date = "昨天";
        } else if (curTime.getDate() - createdate == 2) {
          this.date = "前天";
        } else if (curTime.getDate() - createdate > 2) {
          createmon = createmon < 10 ? "0" + createmon : createmon;
          createdate = createdate < 10 ? "0" + createdate : createdate;
          this.date = `${createmon}月${createdate}日`;
        }
      } else{
        createmon = createmon < 10 ? "0" + createmon : createmon;
        createdate = createdate < 10 ? "0" + createdate : createdate;
        this.date = `${createmon}月${createdate}日`;
      }
    },
  },
  mounted() {
    this.id = this.cardItem.id;
    this.getTime(this.cardItem.pubTime);
  },
};
</script>

<style lang="scss" scoped>
.small-card {
  text-align: center;
  margin-top: 20px;
  .img-box {
    position: relative;
    img {
      width: 100%;
      border-radius: 5px;
      box-shadow: 0px 6px 10px 0px rgb(170, 169, 169),
        -5px 0px 10px 0px rgb(218, 216, 216),
        0px 5px 10px 0px rgb(218, 216, 216);
    }
    .time {
      width: 78px;
      height: 78px;
      border: 2px solid rgba(124, 179, 149, 0.8);
      border-radius: 50%;
      box-sizing: border-box;
      padding: 3px;
      transform: rotateZ(-25deg);
      position: absolute;
      right: -37px;
      bottom: 5px;
      .time-box {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: rgba(124, 179, 149, 0.8);
        text-align: center;
        padding: 16px 4px;
        box-sizing: border-box;
        p {
          font-size: 12px;
          margin: 0;
          color: rgba($color: #fff, $alpha: 0.5);
        }
        .date {
          font-size: 14px;
          color: rgba($color: #fff, $alpha: 0.7);
        }
      }
    }
  }
  .tit {
    font-size: 16px;
    color: #333;
  }
  p {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
  }
}
</style>